<template>
    <div class="t">
        <div class="b">
            {{ num }}
        </div>
        <button @click="addLoading" :loading="isLoading">+</button><p></p>
        <el-button @click="addLoading" type="success" :icon="Search" :loading="isLoading">搜索</el-button>
    </div>
</template>
<script>
// 导入图标
    import { Search } from '@element-plus/icons-vue'
    export default {
        name: 'test',
        setup() {
            return {
                Search
            }
        },
        data() {
            return {
                num:0
            }
        },
        methods: {
            addNum(){
                this.num++
            },
            addLoading(){
                this.isLoading = true
                setTimeout(() => {
                    // this.num++
                    this.isLoading = false
                }, 2000);
            }
        },
        //监听
        watch:{
            num(newValue,oldValue){
                if(newValue > 5){
                console.log("只因")
            }
                console.log("新数——"+newValue+"旧——"+oldValue)
            }
        },
    }
</script>
<style scoped>
.t{
    width: 100%;
    height: 600px;
}
</style>